<template>
  <view class="flex-col">

    <view class="page-wrap top-wrap">
      <view class="flex-col flex1">
        <view class="flex-row left20 bottom10 top10 ">
          <text class="right20 flex1">{{form.customerName|filterNull}}</text>
          <dict-tag
            :options="dict.type.business_scope"
            show-tag
            :value="form.businessScopeCode"/>
        </view>
        <view class="text-line">
          <text class="text-name">跟进人:</text>
          <text class="text-value">{{ form.followerNames|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">跟进时间:</text>
          <text class="text-value flex1">{{ form.lastFollowTime|filterNull }}</text>


          <uni-tag :inverted="false" text="跟进历史记录" type="primary" @click="goRecord"></uni-tag>
        </view>
      </view>

<!--      <view class="flex-col align-center" @click="goRecord">-->
<!--        <uni-icons type="refreshempty" ></uni-icons>-->
<!--        <text class="history" >跟进历史记录</text>-->
<!--      </view>-->

    </view>

    <view class="page-wrap bottom115">
      <uni-forms ref="form" :value="form" labelWidth="auto" :labelPosition="'top'">

        <uni-forms-item required name="followSourceCode" label="跟进方式:" :rules="[{
                                         required: true,
                                         errorMessage: '请选择跟进方式',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            @change="val=>form.followSource = val?val.label:null"
            v-model="form.followSourceCode"
            dataKey="label"
            dataValue="value"
            :localdata="dict.type.clues_source"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item required name="followStatusCode" label="跟进状态:" :rules="[{
                                         required: true,
                                         errorMessage: '请选择跟进状态',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            @change="val=>form.followStatus = val?val.label:null"
            v-model="form.followStatusCode"
            dataKey="label"
            dataValue="value"
            :localdata="dict.type.clues_status"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item required name="followIntentionCode" label="意向情况:" :rules="[{
                                         required: true,
                                         errorMessage: '请选择意向情况',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            v-model="form.followIntentionCode"
            dataKey="label"
            dataValue="value"
            :localdata="dict.type.clues_intention"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item name="followMemo" label="跟进内容:">
          <uni-easyinput type="textarea" maxlength="255" v-model="form.followMemo" placeholder="请输入跟进内容"/>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="button-container">
      <button class="btn-item" @click="submit">提 交</button>
    </view>
  </view>
</template>

<script>
import {cluesDetail, cluesFollowRecordAdd} from "@/api/memberManage/clueList";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  dicts: ["business_scope", "clues_source", "clues_status", "clues_intention"],
  data() {
    return {
      form: {},
      cluesId: null,
    }
  },
  onLoad(op) {
    this.cluesId = op?.cluesId ?? null;

    if (this.cluesId) {
      this.getOldData();
    }
  },
  methods: {

    getOldData() {
      cluesDetail(this.cluesId).then(res => {
        this.form = res?.data?.clues ?? {}
      })
    },

    submit() {
      console.log('form', this.form)
      this.$refs.form.validate().then(res => {
        uni.showLoading();
        cluesFollowRecordAdd({
          ...this.form,
          cluesId: this.cluesId
        }).then(response => {
          uni.hideLoading();
          uni.$emit("refreshClue", true);
          this.$modal.msgSuccess("跟进成功");
          setTimeout(() => {
            this.$tab.navigateBack();
          }, 1000)
        }).finally(f => {
			setTimeout(() => {
			  uni.hideLoading();
			}, 1000)
        })
      })
    },

    goRecord(){
      this.$tab.navigateTo('/pages/CluePage/clue/record?cluesId='+this.cluesId)
    }
  }
}
</script>
<style lang="scss" scoped>
.top-wrap {
  flex-direction: row;
  align-items: center;
  padding: 20rpx 20rpx 20rpx 0;
}
.history{
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}

</style>
